<template>
  <el-dialog :model-value="dialogVisible" title="选择流程" width="60%" align-center @closed="handleCancel">
    flow table
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" :disabled="selectCount !== 1" @click="handleOk">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElDialog } from 'element-plus'

const props = withDefaults(defineProps<{ visible: boolean }>(), { visible: false })
const emits = defineEmits(['ok', 'update:visible'])

const refTable = ref()
const dialogVisible = computed(() => props.visible)
const selectCount = ref(1) // computed(() => (refTable.value ? refTable.value.selection.length : 0))

const handleOk = () => {
  emits('ok', { id: 'id', name: 'name' })
  emits('update:visible', false)
}
const handleCancel = () => {
  // refTable.value.table.clearSelection()
  emits('update:visible', false)
}
</script>

<style lang="scss" scoped></style>
